<template>
  <div class="person">
    <h1>情况1:监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div> 
</template>

<script lang="ts" setup name="Person">
  import { ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }

  // 监视：watch(监视对象，回调函数)，返回值是一个函数，停止监视的函数
  // 监视ref定义的数据，并不是值，所以不加.value
  const stopwatch = watch(sum,(newValue,oldValue) => {
    console.log('sum变化了',oldValue,newValue);
    // 停止监视
    if(newValue>10){
      stopwatch()
    }
  })
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>